<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-下拉菜单</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        li {
          list-style-type: none;
        }
    
        a {
          text-decoration: none;
          font-size: 14px;
        }
    
        .nav {
          margin: 100px;
        }
    
        .nav>li {
          position: relative;
          float: left;
          width: 80px;
          height: 41px;
          text-align: center;
        }
    
        .nav li a {
          display: block;
          width: 100%;
          height: 100%;
          line-height: 41px;
          color: #333;
        }
    
        .nav>li>a:hover {
          background-color: #eee;
        }
    
        .nav ul {
          display: none;
          position: absolute;
          top: 41px;
          left: 0;
          width: 100%;
          border-left: 1px solid #fecc5b;
          border-right: 1px solid #fecc5b;
        }
    
        .nav ul li {
          border-bottom: 1px solid #fecc5b;
        }
    
        .nav ul li a:hover {
          background-color: #fff5da;
        }
      </style>
</head>
<body>
    <ul class="nav">
        <li>
          <a href="#">微博1</a>
          <ul>
            <li><a href="">私信1</a></li>
            <li><a href="">评论1</a></li>
            <li><a href="">@我1</a></li>
          </ul>
        </li>
        <li>
          <a href="#">微博2</a>
          <ul>
            <li><a href="">私信2</a></li>
            <li><a href="">评论2</a></li>
            <li><a href="">@我2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">微博3</a>
          <ul>
            <li><a href="">私信3</a></li>
            <li><a href="">评论3</a></li>
            <li><a href="">@我3</a></li>
          </ul>
        </li>
        <li>
          <a href="#">微博4</a>
          <ul>
            <li><a href="">私信4</a></li>
            <li><a href="">评论4</a></li>
            <li><a href="">@我4</a></li>
          </ul>
        </li>
      </ul>

      <script>
        /* 
                需求：
                1. 鼠标接触 li,则显示 ul
                2. 鼠标离开 li,则隐藏 li
            $(this) 转化为 jQuery 对象
            jQuery 绑定事件
            show() 显示
        */

        // 入口函数  show 显示元素  hide隐藏元素
        $(function(){
            // 类选择器
            $('.nav')
            // 子选择器(亲儿子)
            .children('li')
            // 事件绑定
            .mouseenter(function(){
                // console.log(this);
                // 转化为 jQuery 对象
                $(this)  // jQuery 当前元素 this不要加引号
                // 子选择器
                .children('ul')
                // 显示元素
                .show();
            });

           // 鼠标离开 li,则隐藏 li
            $('.nav').children('li').mouseleave(function(){
                $(this).children("ul").hide();
            })
        })
      </script>
</body>
</html>